<template>
	<view class="wanl-order-list">
		<view class="navbar bg-white fixed w100">
			<view class="nav-item text-df" v-for="(item, index) in navList" :key="item.state" :class="{ current: tabCurrentIndex === index }" @tap="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<scroll-view scroll-y="true" class="list">
			<item :data="items" @choose="choose"></item>
		</scroll-view>
		
		<view class="btn fixed">
			<text>照护</text>
			<text class="t">填写记录</text>
			<text class="t">填写日志</text>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex';
	import item from './components/item.vue'
	export default {
		components:{
			item
		},
		data() {
			return {
				tabCurrentIndex:0,
				navList: [
					{
						state: 1,
						text: '待照护'
					},
					{
						state: 2,
						text: '已接收'
					},
					{
						state: 3,
						text: '全部用户'
					}
				],
				items: [{
						value: 'USA',
						name: '美国',
						checked: 'true',
						status: 3,
						show: false
					},
					{
						value: 'CHN',
						name: '中国',
						status: 1,
						show: false
					},
					{
						value: 'BRA',
						name: '巴西',
						status: 4,
						show: false
					},
					{
						value: 'JPN',
						name: '日本',
						status: 3,
						show: false
					},
					{
						value: 'ENG',
						name: '英国',
						status: 3,
						show: false
					},
					{
						value: 'FRA',
						name: '法国',
						status: 3,
						show: false
					},
					{
						value: 'FRA',
						name: '法国',
						status: 3,
						show: false
					},
					{
						value: 'FRA',
						name: '法国',
						status: 3,
						show: false
					},
					{
						value: 'FRA',
						name: '法国',
						status: 3,
						show: false
					},
					{
						value: 'FRA',
						name: '法国',
						status: 3,
						show: false
					},
				],
			}
		},
		computed: {
			...mapState(['user','common'])
		},
		onNavigationBarButtonTap(e) {
			this.$wanlshop.to('/pages/nursing/history')
		},
		methods: {
			tabClick(index) {
				this.tabCurrentIndex = index;
			},
			choose(data) {
				if(data.status == 4) {
					this.$wanlshop.to('/pages/nursing/detail')
				} else {
					this.$wanlshop.to('/pages/nursing/form')
				}
			}
		}
	}
</script>

<style lang="less" scoped>
page {
	height: 100%;
}
.list {
	padding-top: 70rpx;
	height: calc(100% - 120rpx - env(safe-area-inset-bottom));
}
.btn {
	display: flex;
	justify-content: space-around;
	width: 100%;
	bottom: 0;
	padding-bottom: calc(env(safe-area-inset-bottom) + 20rpx);
	text {
		display: inline-block;
		width: 200rpx;
		height: 72rpx;
		line-height: 72rpx;
		text-align: center;
		color: #FFFFFF;
		font-family: PingFang SC, PingFang SC;
		font-size: 32rpx;
		background: #4CBD66;
		border-radius: 10rpx;
	}
	.t {
		background-color: #FF7E2C;
	}
}
</style>
